<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="{{=T.accepted_language or 'en'}}">

    <head>
        <title>Visualization</title>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        {{include 'web2py_ajax.html'}}

        <script type="text/javascript" src="{{=URL(request.application,'static','raphael.js')}}"></script>
        <script type="text/javascript" src="{{=URL(request.application,'static','jquery.autoSuggest.js')}}"></script>
        <script type="text/javascript" src="{{=URL(request.application,'static','jquery-ui-1.8.2.custom.min.js')}}"></script>
        <script type="text/javascript" src="{{=URL(request.application,'static','utility.js')}}"></script>
        <script type="text/javascript" src="{{=URL(request.application,'static','viewerGlobals.js')}}"></script>
        <script type="text/javascript" src="{{=URL(request.application,'static','shadowboxUtil.js')}}"></script>
        <script type="text/javascript" src="{{=URL(request.application,'static','shadowbox.js')}}"></script>
        <script type="text/javascript" src="{{=URL(request.application,'static','elementSort.js')}}"></script>
        <script type="text/javascript" src="{{=URL(request.application,'static','farbtastic.js')}}"></script>
        <script type="text/javascript" src="{{=URL(request.application,'static','viewerUtil.js')}}"></script>
        <script type="text/javascript" src="{{=URL(request.application,'static','config.js')}}"></script>

        <link rel="stylesheet" media="screen,projection" type="text/css" href="{{=URL(request.application,'static','shadowbox.css')}}" />
        <link rel="stylesheet" media="screen,projection" type="text/css" href="{{=URL(request.application,'static','autoSuggest.css')}}" />
        <link rel="stylesheet" media="screen,projection" type="text/css" href="{{=URL(request.application,'static','jquery-ui-1.8.1.custom.css')}}" />
        <link rel="stylesheet" media="screen,projection" type="text/css" href="{{=URL(request.application,'static','farbtastic.css')}}" />
        <link rel="stylesheet" media="screen,projection" type="text/css" href="{{=URL(request.application,'static','custom.css')}}" />

    </head>

    <!-- oncontextmenu return false disables default right click -->
    <body oncontextmenu="return false;">

        <div id="leftPanel" class="fLeft width20 height95 blackBorder">

            <div class="fullWidth center bigText bottomBorder bottomMargin1">Control Panel</div>

            <!-- disable left panel options until labels are loaded -->
            <div>
                <div id="scaleItem" class="fLeft disabledPanelItem width33">Scaling Options</div>
                <div id="supportValueItem" class="fLeft disabledPanelItem width33">Support Value Options</div>
                <div id="ladderizeItem" class="fRight disabledPanelItem width33">Ladderize</div>

                <div class="clear"></div>
            </div>

            <div>
                <div id="labelItem" class="fLeft disabledPanelItem width50">Label Options</div>
                <div id="optionsItem" class="fRight disabledPanelItem width50">More Options</div>
                <div class="clear"></div>
            </div>
    
            <div class="bottomBorder">
                <div id="exportItem" class="fLeft disabledPanelItem width50">Export Options</div>
                <div id="zoomItem" class="fRight disabledPanelItem width50">Zoom Options</div>
                <div class="clear"></div>
            </div>
            <!-- disable left panel options until labels are loaded -->


            <div id="tabs">

                <ul id="tabSelector">
                    <li><a href="#fragment-1"><span class="smallerText">Overview</span></a></li>
                    <li><a href="#fragment-2"><span class="smallerText">Label Selector</span></a></li>
                    <li><a href="#fragment-3"><span class="smallerText">Color Picker</span></a></li>
                </ul>

                <!-- scaledTree is the wrong name to use here -->
                <div id="fragment-1">  <div id="scaledTreeContainer" class='fullWidth'></div> </div>


                <div id="fragment-2" class="smallText">
          
                    <!-- div to hold label selector options --> 
                    <div id='nodeSelectorContainer'> 
                        <div id="labelSelectorOptions" class="pointer fRight smallText blue">Label Selector Options</div>
                        <div class="clear"</div>
                    </div>

                    <!-- div to hold label suggestion textbox -->
                    <div id="nodeSuggestDiv"> </div>

                    <!-- holds the list of labels -->
                    <div class="scrollable" id="nodeSelector"</div>

                    <!-- contains actions on selected clades -->
                    <div id="nodeCleanDiv" class="topBlackBorder paddingTop5 paddingBottom5">
                        <div class="fLeft"> <a id="reRootLink" class="smallText disabled" href="javascript:void(0)">ReRoot Tree (MRCA)</a> </div>
                        <div class="fRight"> <a id="pruneLink" class="smallText disabled" href="javascript:void(0)" onclick="return false;">Prune Taxa</a> </div>
                        <div class="clear"></div>
                    </div>

                </div>
        
        
                <div id="fragment-3"> <div id="colorPickerContainer" class="fullHeight fullWidth topMargin1"></div> </div>
        
            </div>

        </div>
        <!-- end of leftPanel -->


        <!-- wrapper scrollable div that contains the visualization, hiding the overflow -->
        <div class="blackBorder scrollable fLeft height95 width78" id="visual_container">

            <!-- div that contains the entire svg visualization, it usually extends past its parent, but is hidden -->
            <div id="raphaelContainer"></div>

        </div>

        <div class="clear"></div>

        <script type="text/javascript" charset="utf-8">
            
            //initialize shadowbox (lightbox)          
            Shadowbox.init( { enableKeys: false, modal: true } );

            globals.applicationName = '{{=request.application}}';
            globals.treeId = '{{=treeId}}';
            globals.scaling = '{{=scaling}}';
            globals.supportValueInfo.thickness = "{{=supportValues['thickness']}}";
            globals.supportValueInfo.threshold = "{{=supportValues['threshold']}}";

            $.ajax( { url: '/{{=request.application}}/default/retrieveTree',
                      type: "POST",
                      data: { treeId: '{{=treeId}}' },
                      success: handleSuccessfullTreeRetrieval } );
     
            // user configuration options are saved in the session - store them here
            {{for item in config.keys():}}
                config[ '{{=item}}' ].value = '{{=config[item]}}';
                if( config[ '{{=item}}' ].value.match(/^\d+$/) ) { config[ '{{=item}}' ].value = parseInt( config[ '{{=item}}' ].value ); }
            {{pass}}

        </script>

      </body>

</html>

              
